<template>
	<view class="kind">
		<!-- <view class="kind-nav">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
        active-color="#000000"
        inactive-color="#999999"
        bar-height="2"
        bar-width="80"
        :bold="false"
      ></u-tabs>
    </view> -->
		<view style="padding: 0 80rpx;">
			<u-tabs :list="topCategoy" bar-width="80" height="80" active-color="#cd8544" :current="tabIndex"
				@change="changeTabIndex" :is-scroll="false"></u-tabs>
		</view>
		<view class="kind-search">
			<view class="kind-search-inner" @click="searchNavigate">
				<u-icon name="search" class="icon" :size="28"></u-icon>
				<view class="text"> 输入搜索内容 </view>
			</view>
		</view>
		<view class="kind-bd">
			<scroll-view scroll-y scroll-with-animation class="kind-bd-name menu-scroll-view" :scroll-top="scrollTop"
				:scroll-into-view="itemId" v-if="query.keyword !== '品牌'">
				<view v-for="(item, index) in category" :key="item.id" class="item u-tab-item"
					:class="[current == index ? 'item--active' : '']" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{ item.goods_cate_name }}</text>
				</view>
			</scroll-view>
			<view>
				<scroll-view style="height: 100%" :scroll-top="scrollRightTop" scroll-y scroll-with-animation
					class="kind-bd-content" :class="{'has-category': query.keyword !== '品牌'}">
					<template>
						<view class="part">
							<!-- <image
		              :src="item.goods_cate_image"
		              mode="aspectFill"
		              class="part-top"
		            /> -->
							<view class="part-bd">
								<template v-for="(single, count) in secondCategory">
									<view :key="single.id" class="item" :id="'item' + count"
										@click="viewInfo(single.id, single.goods_cate_name)">
										<image :src="single.goods_cate_image" mode="aspectFill" class="item-cover" />
										<view class="item-name">
											{{ single.goods_cate_name }}
										</view>
									</view>
								</template>
							</view>
						</view>
					</template>
				</scroll-view>
			</view>
		</view>
		<pageCont />
	</view>

</template>

<script>
	import {
		kinds,
		categoryListApi
	} from "@/utils/api";
	import pageCont from '@/components/pageContainer.vue'
	export default {
		components: {pageCont},
		data() {
			return {
				data: [],
				current: 0,
				list: [],
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: "", // 栏目右边scroll-view用于滚动的id
				tabbar: "",
				menuItemPos: [],
				arr: [],
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				timer: null, // 定时器
				tabIndex: 0,
				topCategoy: [{
						name: '品牌'
					},
					{
						name: '女士'
					},
					{
						name: '男士'
					},
				],
				query: {
					keyword: '',
					pid: 0
				},
				// 一级分类
				category: [],
				categoryId: 0,
				// 二级分类
				secondCategory: []
			};
		},
		onLoad() {
			this.query.keyword = this.topCategoy[0].name
			// this.initKinds();
		},
		watch: {
			['query.keyword']: {
				deep: true,
				handler: function() {
					this.firstCategory()
				}
			},
			categoryId() {
				if (this.query.keyword == '品牌') {
					this.secondCategory = this.category
					return
				}
				this.getSecondCategory()
			}
		},
		methods: {
			async firstCategory() {
				let query = JSON.parse(JSON.stringify(this.query))
				delete query.pid
				let res = await categoryListApi(query)
				console.log(query);
				this.category = res.data
				this.categoryId = this.category[0].id || 0
				this.current = 0
				if (query.keyword == '品牌') return
				this.getSecondCategory()
			},
			async getSecondCategory() {
				this.query.pid = this.categoryId
				let query = JSON.parse(JSON.stringify(this.query))
				if (query.keyword == '品牌') {
					delete query.keyword
				}
				let res = await categoryListApi(query)
				this.secondCategory = res.data || []
			},
			async initKinds() {
				kinds().then((resp) => {
					if (resp.code == 200) {
						this.data = resp.data;
						console.log(this.data);
						this.list = this.data.map(item => {
							return {
								name: item.goods_cate_name,
							}
						})
						// const { goods_category, goods_junior } = resp.data;
						// for(var i=0;i<goods_category.length;i++){
						//   this.data.push({
						//     ...goods_category[i],
						//     items:[]
						//   })
						//   for(var j=0;j<goods_junior.length;j++){
						//     // if(goods_junior[j].)
						//   }

						// }
					}
				});
			},
			changeTabIndex(e) {
				this.tabIndex = e
				this.query.keyword = this.topCategoy[e].name
			},
			// 三级页面跳转
			viewInfo(id, name) {
				uni.navigateTo({
					url: "/pages/third/third?type=normal&id=" + id + "&name=" + name,
				});
			},
			// 搜索页面跳转
			searchNavigate() {
				uni.navigateTo({
					url: "/pages/common/search/search",
				});
			},

			change() {},
			// 点击左边的栏目切换
			async swichMenu(index) {
				let tmp = this.category[index]
				if (this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (index == this.current) return;
				this.scrollRightTop = this.oldScrollTop;
				this.categoryId = tmp.id
				this.$nextTick(function() {
					this.scrollRightTop = this.arr[index];
					this.current = index;
					this.leftMenuStatus(index);
				});
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select("." + elClass)
						.fields({
								size: true,
							},
							(res) => {
								// 如果节点尚未生成，res值为null，循环调用执行
								if (!res) {
									setTimeout(() => {
										this.getElRect(elClass);
									}, 10);
									return;
								}
								this[dataVal] = res.height;
								resolve();
							}
						)
						.exec();
				});
			},
			// 观测元素相交状态
			async observer() {
				this.tabbar.map((val, index) => {
					let observer = uni.createIntersectionObserver(this);
					// 检测右边scroll-view的id为itemxx的元素与kind-bd-content的相交状态
					// 如果跟.kind-bd-content底部相交，就动态设置左边栏目的活动状态
					observer
						.relativeTo(".kind-bd-content", {
							top: 0,
						})
						.observe("#item" + index, (res) => {
							if (res.intersectionRatio > 0) {
								let id = res.id.substring(4);
								this.leftMenuStatus(id);
							}
						});
				});
			},
			// 设置左边菜单的滚动状态
			async leftMenuStatus(index) {
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect("menu-scroll-view", "menuHeight");
					await this.getElRect("u-tab-item", "menuItemHeight");
				}
				// 将菜单活动item垂直居中
				this.scrollTop =
					index * this.menuItemHeight +
					this.menuItemHeight / 2 -
					this.menuHeight / 2;
			},
			// 获取右边菜单每个item到顶部的距离
			getMenuItemTop() {
				new Promise((resolve) => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery
						.selectAll(".part")
						.boundingClientRect((rects) => {
							// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
							if (!rects.length) {
								setTimeout(() => {
									this.getMenuItemTop();
								}, 10);
								return;
							}
							rects.forEach((rect) => {
								// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
								this.arr.push(rect.top - rects[0].top);
								resolve();
							});
						})
						.exec();
				});
			},
			// 右边菜单滚动
			async rightScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
				if (this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (this.timer) return;
				if (!this.menuHeight) {
					await this.getElRect("menu-scroll-view", "menuHeight");
				}
				setTimeout(() => {
					// 节流
					this.timer = null;
					// scrollHeight为右边菜单垂直中点位置
					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
					for (let i = 0; i < this.arr.length; i++) {
						let height1 = this.arr[i];
						let height2 = this.arr[i + 1];
						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
						if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
							this.leftMenuStatus(i);
							return;
						}
					}
				}, 10);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.kind {
		height: 100vh;

		&-search {
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 30rpx;
			background-color: #ffffff;
			// position: fixed;
			left: 0;
			top: 0;
			z-index: 2;

			&-inner {
				background-color: #f6f6f6;
				border-radius: 32rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #aaaaaa;

				.icon {
					margin: 0 20rpx;
				}
			}
		}

		&-bd {
			// TODO
			height: calc(100% - 244rpx);
			// height: 100%;
			display: flex;
			position: fixed;
			top: 212rpx;
			left: 0;

			justify-content: space-between;

			&-name {
				width: 155rpx;
				height: 100%;
				background-color: #f6f6f6;

				.item {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					color: #666666;
					font-size: 24rpx;
				}

				.item--active {
					background-color: #ffffff;
					color: #cd8544;
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			&-content {
				width: 100vw;
				box-sizing: border-box;
				padding: 0 30rpx 0 45rpx;

				.part {
					&-top {
						width: 100%;
						height: 175rpx;
						margin-bottom: 28rpx;
					}

					&-bd {
						width: 100%;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						justify-content: space-between;
						grid-row-gap: 20rpx;

						.item {
							width: 100%;

							&-cover {
								width: 100%;
								height: 235rpx;
							}

							&-name {
								width: 100%;
								text-align: center;
								line-height: 50rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #211f1f;
								font-size: 26rpx;
							}
						}
					}
				}

				&.has-category {
					width: calc(100vw - 150rpx);
					justify-content: space-around;
				}
			}
		}
	}

	.category-name {
		margin: 20rpx 0;
		font-weight: bold;
		font-size: 36rpx;
	}
</style>